<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="UTF-8"/>
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <title>青芽医疗管理平台</title>
  <meta content="数据采集分析系统" name="description">
  <meta content="数据采集分析系统" name="keywords">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link href="element-ui/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body class="hold-transition">

<div id="app">
  <div class="filter-container">
    <el-input class="filter-item" placeholder="药品名称" style="width: 200px;" v-model="pagination.queryName"></el-input>
    <el-button @click="_getMedicalPage()" class="dalfBut">查询</el-button>
    <el-button @click="handleAdd()" class="butT" type="primary">新建药品</el-button>
  </div>

  <el-table :data="list" current-row-key="medicalId" highlight-current-row size="small" stripe>
    <el-table-column align="center" label="序号" type="index"></el-table-column>
    <el-table-column align="center" label="药品名称" prop="medicalName"></el-table-column>
    <el-table-column align="center" label="药品描述" prop="medicalDescribe"></el-table-column>
    <el-table-column align="center" label="药品价格" prop="medicalPrice"></el-table-column>
    <el-table-column align="center" label="操作" width="150">
      <template slot-scope="scope">
        <el-button @click="handleUpdate(scope.row)" size="mini" type="primary">编辑</el-button>
        <el-button @click="delMedical(scope.row)" size="mini" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-container">
    <el-pagination
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            @current-change="handleCurrentChange"
            class="pagiantion"
            layout="total, prev, pager, next, jumper">
    </el-pagination>
  </div>

  <div class="add-form">
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" title="添加药品" width="360px">
      <el-form :model="medical" label-position="right" label-width="100px" ref="dataEditForm">
        <el-row>
          <el-form-item label="药品名称" prop="medicalName">
            <el-input v-model="medical.medicalName"/>
          </el-form-item>
          <el-form-item label="药品描述" prop="medicalDescribe">
            <el-input v-model="medical.medicalDescribe"/>
          </el-form-item>
          <el-form-item label="药品价格" prop="medicalPrice">
            <el-input v-model="medical.medicalPrice"/>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button @click="addMedical()" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>

  <div class="add-form">
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible4Edit" title="编辑药品" width="360px">
      <el-form :model="medical" label-position="right" label-width="100px" ref="dataEditForm">
        <el-row>
          <el-form-item label="药品名称" prop="medicalName">
            <el-input v-model="medical.medicalName"/>
          </el-form-item>
          <el-form-item label="药品描述" prop="medicalDescribe">
            <el-input v-model="medical.medicalDescribe"/>
          </el-form-item>
          <el-form-item label="药品价格" prop="medicalPrice">
            <el-input v-model="medical.medicalPrice"/>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
        <el-button @click="updateMedical()" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</div>

</body>
<!-- 引入组件库 -->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/axios-0.18.0.js"></script>
<script type="application/javascript">
  var app = new Vue({
    el: '#app',
    data: {
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        queryString: null//查询条件
      },
      list: [],
      medical: {},
      dialogFormVisible: false,
      dialogFormVisible4Edit: false,
    },
    mounted() {
      this.getMedicalPage();
    },
    methods: {
      _getMedicalPage() {
        this.pagination.currentPage = 1;
        this.getMedicalPage();
      },
      getMedicalPage() {
        //发送ajax请求，提交分页相关请求参数（页码、每页显示记录数、查询条件）
        var queryPageBean = {
          currentPage: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          queryTerm: {
            medicalName: this.pagination.queryName
          }
        };
        axios.post("/medical/getMedicalPage", "queryPageBean=" + JSON.stringify(queryPageBean)).then((res) => {
          this.list = res.data.list;
          this.pagination.total = res.data.total;
        });
      },
      handleCurrentChange(currentPage) {
        //为模型数据赋值（当前页面）
        this.pagination.currentPage = currentPage;
        this.getMedicalPage();
      },
      handleAdd() {
        this.medical = {};
        this.dialogFormVisible = true;
      },
      addMedical() {
        axios.post('/medical/addMedical', "medical="+JSON.stringify(this.medical)).then(res => {
          this.dialogFormVisible = false;
          if (res) {
            this.$message({
              type: 'success',
              message: "添加成功"
            });
          } else {
            this.$message.error("添加失败");
          }
          this.getMedicalPage();
        });
      },
      handleUpdate(row) {
        this.dialogFormVisible4Edit = true;
        axios.get("/medical/getById?id=" + row.medicalId).then((res) => {
          this.medical = res.data;
        });
      },
      updateMedical() {
        this.$confirm("你确定要修改当前数据吗？", "提示", {//确认框
          type: 'warning'
        }).then(() => {
          axios.post("/medical/updateMedical", "medical="+JSON.stringify(this.medical)).then((res) => {
            if (res) {
              this.$message({
                type: 'success',
                message: "修改成功"
              });
              this.getMedicalPage();
            } else {
              this.$message.error("修改失败");
            }
          }).catch((r) => {
            this.showMessage(r);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '操作已取消'
          });
        }).finally(() => {
          this.getMedicalPage();
          this.dialogFormVisible4Edit = false;
        });
      },
      delMedical(row) {
        this.$confirm("你确定要删除当前数据吗？", "提示", {//确认框
          type: 'warning'
        }).then(() => {
          //用户点击确定按钮，发送ajax请求，将检查项ID提交到Controller进行处理
          axios.post("/medical/delMedical", "medical="+JSON.stringify(row)).then((res) => {
            if (res.data) {
              //执行成功
              //弹出成功提示信息
              this.$message({
                type: 'success',
                message: "删除成功"
              });
              //重新进行分页查询
              this.getMedicalPage();
            } else {
              //执行失败
              this.$message.error("删除失败");
            }
          }).catch((r) => {
            this.showMessage(r);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '操作已取消'
          });
        });
      },
    }
  })
</script>
</html>